<template>
  <div>
    <h1 class="mytitle">日常工具</h1>
    <div class="iocn_wrap">
      <div class="nav_one" @click="$router.push('/layout/dayen')">
          <img src="../../assets/logo.png" alt="">
          <h1>每日英语</h1>
          <div>
            每日为您推荐英语励志短句
          </div>
      </div>
      <div class="nav_one">
          <img src="../../assets/logo.png" alt="">
          <h1>每日电影</h1>
          <div>
            每日为您推荐电影
          </div>
      </div>
        <div class="nav_one">
          <img src="../../assets/logo.png" alt="">
          <h1>每日电影</h1>
          <div>
            每日为您推荐电影
          </div>
      </div>
        <div class="nav_one">
          <img src="../../assets/logo.png" alt="">
          <h1>每日电影</h1>
          <div>
            每日为您推荐电影
          </div>
      </div>
    </div>
    <img :src="imgsrc" alt="">
    <input type="file" @change="toup">
    <img :src="aiimg" alt="">
  </div> 
</template>

<script>
// @ ---代表src路径
import {queryQQ} from '../../api/richang'
import {duanjuQuery,kkqq,myupload,mykd,getColor} from '../../api/tianqi'
export default {
  name: '2209vueIndex',

  data() {
    return {
      files:"",
      imgsrc:"",
      aiimg:""
    };
  },

  mounted() {
      queryQQ({qq:84500222}).then(res=>{
        console.log(res,"-----")
      })
      duanjuQuery("总裁").then(res=>{
        console.log(res,"6666666")
      })
      kkqq().then(res=>{
        console.log(res)
      })
      mykd(777206348540067).then(res=>{
        console.log(res,"------")
      })
      getColor({
        url:"https://www.baidu.com",
        size:500
      }).then(res=>{
          console.log(res,"******")
          this.imgsrc=URL.createObjectURL(res.data);
      })
  },

  methods: {
    async toup(e){
      // 当前文件上传框e.target
      // 文件数据e.target.files[0]
      // ----------------
      // let formdata=new FormData();
      // //  存储文件数据包
      // formdata.append("随机字符串",e.target.files[0])
    // ----------------
      
      let res=await myupload({
        file:e.target.files[0]
      });
      console.log(res)
      this.aiimg=res.data.result;
    }
  },
};
</script>
<style lang="less">
.mytitle{
  margin-left:40px;
  font-size:40px;

}
    .iocn_wrap{
      width:80%;
      margin:20px auto;
      display:flex;
      justify-content:space-between;
      .nav_one{
        width:20%;
        height:300px;
        text-align:center;
        align-items:center;
        background:pink;
       display:flex;
      justify-content:space-around;
      flex-direction:column;
        &:nth-child(2){
           background:purple;
        }
         &:nth-child(3){
           background:skyblue;
        }
        h1{
          color:white;
          font-size:30px;
        }
        img{
          width:120px;
          height:120px;
        }
      }
    }
</style>